<template>
  <div :loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="状态ID" prop="ID">
              <el-input v-model="form.ID" placeholder="请输入ID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="状态名" prop="NAME">
              <el-input v-model="form.NAME" placeholder="请输入状态名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" @click="query" size="mini">查询</el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="12" :md="12" v-if="btnPermission('Button_Option_Add')">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="add()">新增</el-button>
        <!-- </el-col>
        <el-col :lg="3" :md="3" v-if="btnPermission('Button_Option_Edit')"> -->
          <el-button type="primary" size="mini" icon="el-icon-edit" :disabled="currentRow.length!=1" @click="update()">
            修改</el-button>
        <!-- </el-col>
        <el-col :lg="3" :md="3" v-if="btnPermission('Button_Option_Delete')"> -->
          <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="currentRow.length!=1"
            @click="seatRelDel">删除</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="tableData" border class="tableMarginTop" header-row-class-name="tableHeaderClass"
        highlight-current-row @selection-change="handleCurrentChange" style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="ID" label="状态ID"></el-table-column>
        <el-table-column prop="NAME" label="状态名"></el-table-column>
        <el-table-column prop="LEVELVALUE1" label="阀值1(分)"></el-table-column>
        <el-table-column prop="LEVELVALUE2" label="阀值2(分)"></el-table-column>
        <el-table-column prop="REMARK1" label="备注1"></el-table-column>
        <el-table-column prop="REMARK2" label="备注2"></el-table-column>

      </el-table>
      <div style="text-align:right;margin-top:20px;">
        <el-pagination @size-change="handleSizeChange" :page-sizes="[10,25,50,100]" :page-size="pageSize"
          @current-change="changePage" :current-page="currentPage" layout="total,sizes, prev, pager, next, jumper"
          background :total="totalRcrdNum"></el-pagination>
      </div>
    </el-card>
    <keep-alive>
      <component :is="dialogList.addAgentWarning" :option="dialogOptions" @refreshTable="query"></component>
    </keep-alive>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import addAgentWarning from "./dialog/addAgentWarning";
  import query from "@/message/siteManagement/agentWarning/query";
  import del from "@/message/siteManagement/agentWarning/delete";
  import request1 from "@/common/utils/requestYg";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  export default {
    data() {
      return {
        loading: false,
        tableData: [],
        currentPage: 1,
        currentRow: [],
        totalRcrdNum: 0,
        pageSize: getGlobalParams.get("PageSize"),
        form: {
          ID: "",
          NAME: ""
        },
        dialogList: {
          addAgentWarning
        },
        dialogOptions: {
          isShow: false
        },
      }
    },
    mounted() {
      this.query();
    },
    methods: {
      add() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.title = "坐席状态预警新增";
        this.dialogOptions.log = "1";
      },
      update() {
        //debugger
        this.dialogOptions.isShow = true;
        this.dialogOptions.title = "坐席状态预警修改";
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.log = "2";
      },
      seatRelDel() {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.del();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除！"
            });
          });
      },
      del() {
        this.loading = true;
        let resBody = new del();
        resBody.data.ID = this.currentRow[0].ID;
        request1(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "删除成功！"
              });
              this.query();
            } else {
              this.loading = false;
              this.$message({
                type: "error",
                message: "删除失败！"
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });

      },
      query() {
        //debugger
        this.loading = true;
        let resBody = new query();
        resBody.data.ID = this.form.ID;
        resBody.data.NAME = this.form.NAME;
        resBody.data.PAGEFLAG = 4;
        resBody.data.CURRPAGE = this.currentPage;
        resBody.data.PAGEROWNUM = this.pageSize;

        request1(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableData = response.RSP_BODY.struct || [];
              this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM;
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
              this.totalRcrdNum = 0;
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      changePage(val) {
        this.currentPage = val;
        this.query();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.query();
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
    }
  }

</script>
